<template>
  <span class="comp-range-filter">
    <div class="flex-box">
      选出
      <a-input-number
        v-model="value.minNumber"
        class="delimiter"
        size="small"
        :min="[null, undefined].includes(min) ? -99999999999 : min"
        :default-value="min"
        @change="onMinNumberChange"
      />
      <span class="spliter"></span>
      <a-input-number
        v-model="value.maxNumber"
        class="delimiter"
        size="small"
        :max="[null, undefined].includes(max) ? 99999999999 : max"
        :default-value="max"
        @change="onMaxNumberChange"
      />
      <span class="fw">范围</span>
    </div>
  </span>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import DataStore from '@/store/modules/dataview'

/** 范围值操作组件 */
@Component({
  name: 'range-filter',
})
export default class RangeFilter extends Vue {
  /** 绑定值 */
  @Prop({
    type: Object,
    default() {
      return {
        maxNumber: 0,
        minNumber: 0,
      }
    },
  })
  value!: Object

  /** 最小值 */
  @Prop({
    type: Number,
    default() {
      return -99999
    },
  })
  min!: number

  /** 最大值 */
  @Prop({
    type: Number,
    default() {
      return 99999
    },
  })
  max!: number

  /** 同步对比值到store */
  syncRangeData() {
    this.$nextTick(() => {
      DataStore.setVrRangeInfo([
        (this.value as any).minNumber,
        (this.value as any).maxNumber,
      ])
    })
  }

  /** 最小值变化事件 */
  onMinNumberChange() {
    this.$nextTick(() => {
      const value = this.value as any
      if ((value.minNumber as number) >= (value.maxNumber as number)) {
        this.$emit('input', {
          minNumber: (value.maxNumber as number) - 1,
          maxNumber: value.maxNumber as number,
        })
      }
      this.syncRangeData()
    })
  }

  /** 最大值变化 */
  onMaxNumberChange() {
    this.$nextTick(() => {
      const value = this.value as any
      if ((value.maxNumber as number) <= (value.minNumber as number)) {
        this.$emit('input', {
          minNumber: value.minNumber as number,
          maxNumber: (value.minNumber as number) + 1,
        })
      }
      this.syncRangeData()
    })
  }
}
</script>
<style lang="less" scoped>
.comp-range-filter {
  display: inline-block;

  .flex-box {
    color: #5d637e;
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 20px;
    width: auto;

    .spliter {
      display: inline-block;
      margin: 0 2px;
      position: relative;
      width: 15px;

      &::after {
        background: #cbceff;
        content: ' ';
        height: 1px;
        left: 0;
        position: absolute;
        top: 50%;
        width: 100%;
      }
    }

    /deep/ .delimiter {
      margin: 0 6px;
      width: 86px;
    }

    // /deep/ .ant-input-number-handler-wrap {
    //   opacity: 1;
    // }
  }

  .fw {
    transform: translateY(2px);
  }
}
</style>
